<template>
  <div >
    <div class="one" style="width:500px;height:400px" id="main"></div>
    <div class="one" style="width:450px;height:400px" id="mains"></div>


    <div id="app" style="width:30%;margin:30px auto;">
      <h1 align="center">快递类型排行榜</h1>
      <el-form ref="form" :model="formLabelAlign" label-width="50px">

        <el-input width="100" v-model="formLabelAlign.one" readonly="readonly"></el-input>

        <el-input width="100" v-model="formLabelAlign.two" readonly="readonly"></el-input>

        <el-input width="100" v-model="formLabelAlign.three" readonly="readonly"></el-input>

        <el-input width="100" v-model="formLabelAlign.four" readonly="readonly"></el-input>

        <el-input width="100" v-model="formLabelAlign.five" readonly="readonly"></el-input>


      </el-form>
    </div>

  </div>
</template>

<script>
//局部引用
const echarts = require('echarts');
export default{
  name:"FinanceView",
  data(){
    return {
      arr:[],
      income:[],
      formLabelAlign: {
        one: '',
        two: '',
        three: '',
        four:'',
        five:''
      }
    }
  },
  mounted() {
    this.initChart()

/*
    var options = {
      title: { text: '近一周快递费用' ,left: 'center'},
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }
      ]
    };

    myChart.setOption(option);
    myCharts.setOption(options);
*/

  },
  created() {

  }
  ,
  methods:{
    initChart() {
      axios.get('http://localhost:8099/finance/table').then(res => {
        console.log('访问后台')
        this.arr = res.data
        // console.log(res.data)
        // console.log(this.arr)

        this.getTop()
        this.drawSource()
        this.getIncome()
      }).catch(error => {
        console.log(error)
      })
    },
    drawSource() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: '快递收入类型占比',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/> {b}:{c} <br/>({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '快递类型',
            type: 'pie',
            radius: '50%',
            data: this.arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    draw(list){
      let myCharts = echarts.init(document.getElementById('mains'));
      let options = {
        title: {text: '近期七次快递收费', left: 'center'},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            /*[820, 932, 901, 934, 1290, 1330, 1320]*/
            data: list,
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      myCharts.setOption(options);
    },
    getIncome(){
      axios.get('http://localhost:8099/finance/income').then(response=>{
        console.log(response.data.data)
        for (let i = 0; i <7 ; i++) {
          this.income[i]=response.data.data[6-i]
        }

        console.log(this.income)
        this.draw(this.income)
      })
    },
    getTop(){
      axios.get('http://localhost:8099/finance/top').then(res=>{
        console.log(res.data)
        console.log(res.data.data[0])
        this.formLabelAlign.one=res.data.data[0]
        this.formLabelAlign.two=res.data.data[1]
        this.formLabelAlign.three=res.data.data[2]
        this.formLabelAlign.four=res.data.data[3]
        this.formLabelAlign.five=res.data.data[4]

      })
    }
  }
}
</script>
<style>
.one{
  display:inline-block
}
</style>

